import React, { FC, useCallback, useEffect, useMemo, useState } from "react";
import styles from "./index.module.less";

interface CardProps {}

const num = 10;

const TestCard = () => {
  const [state, setState] = useState(num);

  const changeNum = useCallback((time = 1000) => {
    setTimeout(() => {
      setState((v) => v - 1);
    }, time);
  }, []);

  useEffect(() => {
    if (state > 0) {
      changeNum();
    }
  }, [state]);

  const [flag, setFlag] = useState(false);

  const disable = useMemo(() => flag || !!state, [flag, state]);

  const buyFood = useCallback(() => {
    setTimeout(() => {
      setFlag(true);
    }, 2000);
  }, []);

  const desc = useMemo(
    () => (state ? state : flag ? "已抢购" : "抢购"),
    [state, flag]
  );

  return (
    <div className={styles.container}>
      <div className={styles.title_content}>
        <p className={styles.title}>杭州市通用5元券</p>
        <p className={styles.subtitle}>
          杭味面馆杭味面馆杭味面馆杭味面馆杭杭味面馆杭味面馆杭味面馆杭味面馆杭味面馆杭味面馆杭味面馆杭味面馆
        </p>
      </div>
      <button onClick={buyFood} disabled={disable} className={styles.btn}>
        {desc}
      </button>
    </div>
  );
};

export default TestCard;
